<template>
    <div id="contr">
      <img src="/static/img/contract/phone.png" alt="" class="phoneicon">
      <img src="/static/img/contract/mail.png" alt="" class="mailicon">
      <img src="/static/img/contract/qq.png" alt="" class="qqicon">
      <img src="/static/img/contract/wxicon.png" alt="" class="wxicon">
      <figure>
        <h2>QQ:805539101</h2>
        <h2>Email:lzg46153@126.com</h2>
        <h2>Phone:18806501093</h2>
        <div class="wxqr">
          <h2>微信二维码:</h2>
          <img src="/static/img/weixin.png" alt="" style="border: 1px solid #c4c4c4;width: 120px;height: auto">
        </div>

      </figure>
    </div>
</template>

<script>
    export default{
        name: 'contract'
    }
</script>

<style>
  #contr{
    position: absolute;
    top:50%;
    left: 50%;
  }
  #contr figure{
    position: absolute;
    top: -130px;
    left: -500px;
  }
#contr img{
  display: block;
  position: absolute;
}
#contr img:hover{
  transform: scale(1.1);
}
  .phoneicon{
    left: 10px;
  }
  .mailicon{
    left: 120px;
      top:80px;
  }
  .qqicon{
    left: 220px;
  }
  .wxicon{
    left: 340px;
    top:80px;
  }
  .wxqr h2{
    display: inline-block;
  }
  .wxqr img{
    display: inline-block!important;
  }
</style>
